<template>
  <view :data-theme="theme">
    <view class="new-users copy-data">
      <view>
        <view class="main_bg">
          <Header />
          <!-- <uniNavBar background-color="transparent" color="#fff" :title="$t(`page.merchantUser.navTitle`)" :border='false' @clickLeft='returns' @clickRight="open">
                <view slot="left" class="iconfont icon-dingbufanhui"></view>
                <view slot="right" class="iconfont icon-more"></view>
          </uniNavBar> -->
        </view>
        <!-- 用户信息 -->
        <view class="head">
          <view class="user-card">
            <view class="user-info">
              <view class="avatar">
                <image
                  class="icon"
                  :src="userInfo.avatar"
                  v-if="userInfo.avatar && uid"
                  @click="goEdit()"
                  mode="widthFix"
                ></image>
                <image
                  v-else
                  class="icon"
                  src="../../static/images/default_avatar.png"
                  mode="widthFix"
                  @click="goEdit()"
                ></image>
              </view>

              <view class="info">
                <view class="name" v-if="!uid" @tap="openAuto">
                  {{ $t(`page.merchantUser.placeLogin`) }}
                </view>
                <view class="name" v-if="uid">
                  {{ userInfo.nickname }}
                </view>
                <view class="flex">
                  <text class="label">
                    {{ $t(`page.users.userInfo.banlance`) }}
                  </text>
                  <view class="num-txt">{{
                    `$ ${merchantInfo.accountBalance || 0}`
                  }}</view>
                </view>
                <text class="iconfont icon-shezhi app_set" @click.stop="goEdit()"></text>
              </view>
            </view>
          </view>
        </view>
        <!-- 主分段器 -->
        <view class="tab-box">
          <view class="uni-padding-wrap uni-common-mt">
            <uni-segmented-control
              :current="current"
              :values="[...$t(`page.merchantUser.tabLists`)]"
              :style-type="'text'"
              :active-color="activeColor"
              @clickItem="onClickItem"
            />
          </view>
          <view class="content">
            <!-- 主页 -->
            <view v-if="current === 0">
              <!-- 销量金额 -->
              <view class="tab-box--card">
                <view class="tab-box--card_part-top">
                  <text class="title">{{
                    $t(`page.merchantUser.homePage.salesVolume`)
                  }}</text>
                  <br />
                  <text class="number">{{ `$ ${merchantInfo.sales || 0}` }}</text>
                </view>
                <view class="tab-box--card_part-bottom">
                  <text class="sub-title"
                    >{{ $t(`page.merchantUser.homePage.yesterday`) }}:
                    {{ `${merchantInfo.yesterdaySales || 0}` }}</text
                  >
                </view>
                <text class="today">{{ $t(`page.merchantUser.homePage.today`) }}</text>
              </view>
              <!-- 订单数量 -->
              <view class="tab-box--card">
                <view class="tab-box--card_part-top">
                  <text class="title">{{
                    $t(`page.merchantUser.homePage.orderQuantity`)
                  }}</text>
                  <br />
                  <text class="number">{{ `${merchantInfo.orderNum || 0}` }}</text>
                </view>
                <view class="tab-box--card_part-bottom">
                  <text class="sub-title"
                    >{{ $t(`page.merchantUser.homePage.yesterday`) }}:
                    {{ `${merchantInfo.yesterdayOrderNum || 0}` }}</text
                  >
                </view>
                <text class="today">{{ $t(`page.merchantUser.homePage.today`) }}</text>
              </view>
              <view class="tab-box--card">
                <!-- 交货数量 -->
                <view class="tab-box--card_part">
                  <text class="title">{{
                    $t(`page.merchantUser.homePage.orderForDelivery`)
                  }}</text>
                  <br />
                  <text class="number">
                    {{ `${merchantInfo.notShippingOrderNum || 0}` }}
                  </text>
                </view>
                <!-- 货架上的商品 -->
                <view class="tab-box--card_part">
                  <text class="title">{{
                    $t(`page.merchantUser.homePage.shelfGoods`)
                  }}</text>
                  <br />
                  <text class="number">
                    {{ `${merchantInfo.onSaleProductNum || 0}` }}
                  </text>
                </view>
              </view>
              <view class="tab-box--card">
                <!-- 待处理订单金额 -->
                <view class="tab-box--card_part">
                  <text class="title">{{
                    $t(`page.merchantUser.homePage.pendingOrderAmount`)
                  }}</text>
                  <br />
                  <text class="number">
                    {{ `$ ${merchantInfo.pendingOrderAmount || 0}` }}
                  </text>
                </view>
                <!-- 待处理订单数量 -->
                <view class="tab-box--card_part">
                  <text class="title">{{
                    $t(`page.merchantUser.homePage.pendingOrderQuantity`)
                  }}</text>
                  <br />
                  <text class="number">
                    {{ `$ ${merchantInfo.pendingOrderCount || 0}` }}
                  </text>
                </view>
              </view>
              <view class="tab-box--card">
                <view class="tab-box--card_part">
                  <text class="title">{{
                    $t(`page.merchantUser.homePage.balance`)
                  }}</text>
                  <br />
                  <text class="number">
                    {{ `$ ${merchantInfo.accountBalance || 0}` }}
                  </text>
                </view>
                <view class="tab-box--card_part">
                  <text class="title">{{
                    $t(`page.merchantUser.homePage.amountToBePaid`)
                  }}</text>
                  <br />
                  <text class="number">
                    {{ `$ ${merchantInfo.pendingEarningsAmount || 0}` }}
                  </text>
                </view>
                <view class="tab-box--card_part">
                  <text class="title">{{
                    $t(`page.merchantUser.homePage.withdrawable`)
                  }}</text>
                  <br />
                  <text class="number">
                    {{ `$ ${merchantInfo.pendingPaymentAmount || 0}` }}
                  </text>
                </view>
              </view>
            </view>
            <!-- 商品 -->
            <view v-if="current === 1">
              <!-- 筛选框 -->
              <uni-data-select
                class="productSelect"
                v-model="productCategory"
                :localdata="productCategoryRange"
                @change="change"
                :placeholder="$t(`page.merchantUser.product.platformProductCategory`)"
              >
              </uni-data-select>

              <!-- 订单跳转 -->
              <button size="mini" type="default" plain="true" class="orderBtn">
                One-click listing
              </button>
              <!-- <uni-data-select v-model="productCategory" :localdata="productCategoryRange" @change="change"
                               :placeholder="$t(`page.merchantUser.product.productState`)"
                               style="margin-top: 20rpx;"></uni-data-select> -->
              <!-- 商品分段器 -->
              <view>
                <uni-segmented-control
                  :current="current2"
                  :values="items2"
                  @clickItem="onClickItem2"
                  styleType="button"
                  activeColor="#000000"
                ></uni-segmented-control>
                <view class="content">
                  <!-- 所有商品 -->
                  <view v-show="current2 === 0">
                    <view class="tab-box--card">
                      <zb-table
                        :stickSide="true"
                        :show-header="true"
                        :columns="productTable.column"
                        :stripe="true"
                        :fit="true"
                        show-summary
                        sum-text="Sum"
                        @toggleRowSelection="productTable.toggleRowSelection"
                        @toggleAllSelection="productTable.toggleAllSelection"
                        :border="true"
                        @edit="productTable.buttonEdit"
                        :data="productTable.data"
                      ></zb-table>
                      <view
                        style="display: flex; justify-content: center; margin-top: 40rpx"
                      >
                        <pagination
                          :page.sync="productTable.page"
                          :pageSize="productTable.pageSize"
                          :total="productTable.total"
                        >
                        </pagination>
                      </view>
                    </view>
                  </view>
                  <!-- 上架的商品 -->
                  <view v-show="current2 === 1">
                    <view class="tab-box--card">
                      <zb-table
                        :show-header="true"
                        :columns="productTable.column"
                        :stripe="true"
                        :fit="true"
                        show-summary
                        sum-text="Sum"
                        @toggleRowSelection="productTable.toggleRowSelection"
                        @toggleAllSelection="productTable.toggleAllSelection"
                        :border="true"
                        @edit="productTable.buttonEdit"
                        :data="productTable.data"
                      ></zb-table>
                      <view
                        style="display: flex; justify-content: center; margin-top: 40rpx"
                      >
                        <pagination
                          :page.sync="productTable.page"
                          :pageSize="productTable.pageSize"
                          :total="productTable.total"
                          @handle-page="getProductData"
                        >
                        </pagination>
                      </view>
                    </view>
                  </view>
                  <!-- 下架的商品 -->
                  <view v-show="current2 === 2">
                    <view class="tab-box--card">
                      <zb-table
                        :show-header="true"
                        :columns="productTable.column"
                        :stripe="true"
                        :fit="true"
                        show-summary
                        sum-text="Sum"
                        @toggleRowSelection="productTable.toggleRowSelection"
                        @toggleAllSelection="productTable.toggleAllSelection"
                        :border="true"
                        @edit="productTable.buttonEdit"
                        :data="productTable.data"
                      ></zb-table>
                      <view
                        style="display: flex; justify-content: center; margin-top: 40rpx"
                      >
                        <pagination
                          :page.sync="productTable.page"
                          :pageSize="productTable.pageSize"
                          :total="productTable.total"
                        >
                        </pagination>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- 订单 -->
            <view v-if="current === 2">
              <view class="tab-box--card">
                <!-- 订单分段器 -->
                <view>
                  <uni-segmented-control
                    :current="current3"
                    :values="items3"
                    @clickItem="onClickItem3"
                    styleType="button"
                    activeColor="#000000"
                  >
                  </uni-segmented-control>
                  <!-- 订单跳转 -->
                  <button
                    size="mini"
                    type="default"
                    plain="true"
                    class="orderBtn orderBtn2"
                  >
                    operate
                  </button>
                  <view class="content">
                    <!-- 所有订单 -->
                    <view v-show="current3 === 0">
                      <view class="tab-box--card">
                        <zb-table
                          :stickSide="true"
                          :show-header="true"
                          :columns="orderTable.column"
                          :stripe="true"
                          :fit="true"
                          show-summary
                          sum-text="合计"
                          @toggleRowSelection="orderTable.toggleRowSelection"
                          @toggleAllSelection="orderTable.toggleAllSelection"
                          :border="true"
                          @edit="orderTable.buttonEdit"
                          :data="orderTable.data"
                        ></zb-table>
                        <view
                          style="
                            display: flex;
                            justify-content: center;
                            margin-top: 40rpx;
                          "
                        >
                          <pagination
                            :page.sync="orderTable.page"
                            :pageSize="orderTable.pageSize"
                            :total="orderTable.total"
                          >
                          </pagination>
                        </view>
                      </view>
                    </view>
                    <!-- 未完成的订单 -->
                    <view v-show="current3 === 1">
                      <view class="tab-box--card">
                        <zb-table
                          :show-header="true"
                          :columns="orderTable.column"
                          :stripe="true"
                          :fit="true"
                          show-summary
                          sum-text="合计"
                          @toggleRowSelection="orderTable.toggleRowSelection"
                          @toggleAllSelection="orderTable.toggleAllSelection"
                          :border="true"
                          @edit="orderTable.buttonEdit"
                          :data="orderTable.data"
                        ></zb-table>
                        <view
                          style="
                            display: flex;
                            justify-content: center;
                            margin-top: 40rpx;
                          "
                        >
                          <pagination
                            :page.sync="orderTable.page"
                            :pageSize="orderTable.pageSize"
                            :total="orderTable.total"
                          >
                          </pagination>
                        </view>
                      </view>
                    </view>
                    <!-- 已完成的订单 -->
                    <view v-show="current3 === 2">
                      <view class="tab-box--card">
                        <zb-table
                          :show-header="true"
                          :columns="orderTable.column"
                          :stripe="true"
                          :fit="true"
                          show-summary
                          sum-text="合计"
                          @toggleRowSelection="orderTable.toggleRowSelection"
                          @toggleAllSelection="orderTable.toggleAllSelection"
                          :border="true"
                          @edit="orderTable.buttonEdit"
                          :data="orderTable.data"
                        ></zb-table>
                        <view
                          style="
                            display: flex;
                            justify-content: center;
                            margin-top: 40rpx;
                          "
                        >
                          <pagination
                            :page.sync="orderTable.page"
                            :pageSize="orderTable.pageSize"
                            :total="orderTable.total"
                          >
                          </pagination>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="false" class="contenBox">
          <!-- 会员菜单 -->
          <view class="user-menus">
            <!-- <view class="menu-title">{{$t(`page.merchantUser.services`)}}</view> -->
            <view
              class="menu_item"
              v-for="(item, index) in mineList"
              :key="index"
              @click="item.hasMore && menusTap(item.url)"
            >
              <view class="flex align-center">
                <image :src="item.pic"></image>
                <text class="pl-20">
                  {{ $t(item.name) }}
                </text>
              </view>
              <view class="value">
                <text v-if="item.id === 'phone'">
                  {{ userInfo.phone }}
                </text>

                <text v-if="item.id === 'email'">
                  {{ userInfo.email }}
                </text>
                <text v-if="item.hasMore" class="iconfont icon-gengduo"></text>
              </view>
            </view>
            <!-- <view class="menu_item" @click="kefuClick()">
              <view class="flex align-center">
                <image src="/static/images/chat_icon.png"></image>
                <text class="pl-20">{{$t(`page.merchantUser.contact`)}}</text>
              </view>
              <text class="iconfont icon-gengduo"></text>
            </view> -->
          </view>
          <!-- <image src="/static/images/support.png" alt="" class='support'>
          <view class="uni-p-b-98"></view> -->
        </view>
        <!--<view class="btns">-->
        <!--	<button class="btn" @click="modal = true" >-->
        <!--		{{$t(`page.users.userInfo.logOut`)}}-->
        <!--	</button>-->
        <!--</view>-->
      </view>
    </view>
    <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
      <user-drawer @close="closeDrawer"></user-drawer>
    </tui-drawer>
    <tui-modal
      :show="modal"
      @click="handleClick"
      @cancel="hide"
      :title="$t(`message.login.prompt`)"
      :content="$t(`message.login.logout`)"
    ></tui-modal>
  </view>
</template>
<script>
import Cache from "@/utils/cache";
import { BACK_URL } from "@/config/cache";
import { getMenuList } from "@/api/user.js";
import { orderCenterData } from "@/api/order.js";
import { toLogin } from "@/libs/login.js";
import { mapGetters } from "vuex";
import { getShare } from "@/api/public.js";
import { setThemeColor } from "@/utils/setTheme.js";
import { chatConfig } from "@/utils/consumerType.js";
import tuiModal from "@/components/tui-modal/tui-modal";
import Header from "@/components/Header/Header.vue";
import { userEdit, getLogout } from "@/api/user.js";
import pagination from "@/pages/user_merchant/onion-pagination/onion-pagination";
import {
  getMerchantDataApi,
  getHomePageDataApi,
  getOperatingDataApi,
  getProductDataApi,
  getOrderDataApi,
} from "@/api/merchant.js";

const app = getApp();
export default {
  computed: mapGetters(["isLogin", "chatUrl", "userInfo", "uid"]),
  components: {
    Header,
    tuiModal,
    pagination,
  },
  data() {
    return {
      orderMenu: [
        {
          img: "icon-daifukuan",
          title: "待付款",
          url: "/pages/users/order_list/index?status=0",
          num: 0,
        },
        {
          img: "icon-daifahuo",
          title: "待发货",
          url: "/pages/users/order_list/index?status=1",
          num: 0,
        },
        {
          img: "icon-daishouhuo",
          title: "待收货",
          url: "/pages/users/order_list/index?status=2",
          num: 0,
        },
        {
          img: "icon-daipingjia-2",
          title: "待评价",
          url: "/pages/users/evaluation_list/index",
          num: 0,
        },
        {
          img: "icon-shouhou_tuikuan-2",
          title: "售后/退款",
          url: "/pages/users/user_return_list/index",
          num: 0,
        },
      ],
      imgUrls: [],
      userMenu: [],
      autoplay: true,
      circular: true,
      interval: 3000,
      duration: 500,
      isAuto: false, //没有授权的不会自动授权
      orderStatusNum: {},
      MyMenus: [],
      wechatUrl: [],
      servicePic: "/static/images/customer.png",
      configApi: {}, //分享类容配置
      theme: app.globalData.theme,
      bgColor: "#e93323",
      rightDrawer: false,
      modal: false,
      mineList: [
        {
          name: "Phone Number",
          icon: "",
          hasMore: false,
          id: "phone",
          pic: "/static/img/phone.svg",
        },
        {
          name: "Email",
          icon: "",
          hasMore: false,
          id: "email",
          pic: "/static/img/email.svg",
        },
        {
          name: "My Order",
          icon: "",
          hasMore: true,
          url: "/pages/users/order_list/index",
          id: "order",
          pic: "/static/img/ic_order.svg",
        },
        {
          name: "Wish List",
          icon: "",
          hasMore: true,
          url: "/pages/users/user_goods_collection/index",
          id: "wish",
          pic: "/static/img/ic_heart.svg",
        },
        {
          name: "Address",
          icon: "",
          hasMore: true,
          url: "/pages/users/user_address_list/index",
          id: "address",
          pic: "/static/img/ic_location.svg",
        },
      ],
      items: ["Home Page", "Product", "Order"],
      current: 0,
      items2: ["All", "On shelves", "Down shelves"],
      current2: 0,
      items3: ["All", "Uncompleted", "Completed"],
      current3: 0,
      colorIndex: 0,
      activeColor: "#000",
      styleType: "button",
      productCategory: "",
      productCategoryRange: [
        {
          text: "21",
          value: 21,
        },
        {
          text: "22",
          value: 22,
        },
      ],
      //订单表格数据
      orderTable: {
        page: 1,
        pageSize: 10,
        total: 0,
        column: [
          {
            type: "selection",
            fixed: true,
            width: 80,
          },
          {
            name: "img",
            label: this.$t(`page.merchantUser.order.tableHeader.picture`),
            width: 80,
            emptyString: "--",
          },
          {
            name: "name",
            label: this.$t(`page.merchantUser.order.tableHeader.name`),
            width: 80,
            emptyString: "--",
          },
          {
            name: "price",
            label: this.$t(`page.merchantUser.order.tableHeader.price`),
            width: 80,
            emptyString: "--",
          },
          {
            name: "quantity",
            label: this.$t(`page.merchantUser.order.tableHeader.quantity`),
            width: 80,
            emptyString: "--",
          },
          {
            name: "operate",
            type: "operation",
            fixed: true,
            label: this.$t(`page.merchantUser.order.tableHeader.operate`),
            renders: [
              {
                name: "operate",
                class: "text-button",
                func: "edit", // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
              },
            ],
          },
        ],
        data: [],
        toggleRowSelection(e, a) {},
        toggleAllSelection() {},
        buttonEdit(row, index) {
          uni.navigateTo({
            url: "/pages/users/user_info_merchant_goods_detail/index",
          });
        },
      },
      // 商品表格
      productTable: {
        page: 1,
        pageSize: 10,
        total: 0,
        column: [
          {
            type: "selection",
            fixed: true,
            width: 50,
          },
          {
            name: "img",
            label: this.$t(`page.merchantUser.order.tableHeader.picture`),
            width: 80,
            emptyString: "--",
          },
          {
            name: "name",
            label: this.$t(`page.merchantUser.order.tableHeader.name`),
            width: 80,
            emptyString: "--",
          },
          {
            name: "price",
            label: this.$t(`page.merchantUser.order.tableHeader.price`),
            width: 80,
            emptyString: "--",
          },
          {
            name: "quantity",
            label: this.$t(`page.merchantUser.order.tableHeader.quantity`),
            width: 80,
            emptyString: "--",
          },
          {
            name: "operate",
            type: "operation",
            fixed: true,
            label: this.$t(`page.merchantUser.order.tableHeader.operate`),
            renders: [
              {
                name: "operate",
                class: "text-button",
                func: "edit", // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
              },
            ],
          },
        ],
        data: [],
        toggleRowSelection(e, a) {},
        toggleAllSelection() {},
        buttonEdit(row, index) {
          uni.navigateTo({
            url: "/pages/users/user_info_merchant_goods_detail/index",
          });
        },
      },
      merchantInfo: {}, // 经营数据
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t(`page.user.navTitle`),
    });
    let that = this;
    that.$set(that, "MyMenus", app.globalData.MyMenus);
    console.log(app.globalData.MyMenus);
    if (that.isLogin == false) {
      // toLogin()
    }
    that.bgColor = setThemeColor();
  },
  onShow() {
    let that = this;
    that.getMerchantInfo();
    if (that.isLogin) {
      that.getMyMenus();
      that.getOrderData();
      that.$store.dispatch("USERINFO");
      that.initPage();
    } else {
      // toLogin();
    }
  },
  methods: {
    // 获取订单列表
    async getOrderListData() {
      if (this.current == 2) {
        try {
          // 请求参数
          let getOrderParams = {
            page: this.orderTable.page,
            limit: this.orderTable.pageSize,
            status: this.current3 == 0 ? "all" : this.current3 == 1 ? "unPaid" : "paid",
          };
          const res = await getOrderDataApi(getOrderParams);
          if (res.code === 200) {
            this.orderTable.total = res.data.total;
            this.orderTable.data = res.data.list;
          }
        } finally {
        }
      }
    },
    // 获取商品数据列表
    async getProductData() {
      // 判断是否是在商品分类
      if (this.current == 1) {
        try {
          // 请求参数
          let getProductParams = {
            page: this.productTable.page,
            limit: this.productTable.pageSize,
            type: this.current2 + 1, // 后台类型1 未全部，2为已上架，3为未上架
          };
          const res = await getProductDataApi(getProductParams);
          if (res.code === 200) {
            this.productTable.total = res.data.total;
            this.productTable.data = res.data.list;
          }
        } finally {
        }
      }
    },
    // 获取商铺信息数据
    async getMerchantInfo() {
      try {
        const res = await getMerchantDataApi({});
        if (res.code == 200) {
          this.merchantInfo = res.data;
        }
        const res1 = await getHomePageDataApi({});
        if (res1.code == 200) {
          this.merchantInfo = { ...this.merchantInfo, ...res1.data };
        }
        const res2 = await getOperatingDataApi({});
        if (res2.code == 200) {
          this.merchantInfo = { ...this.merchantInfo, ...res2.data };
        }
        console.log("getMerchantDataApi :>> ", res);
      } catch (e) {
        console.error(e);
      }
    },
    initPage() {
      this.mineList.forEach((v) => {
        let str = `page.users.userInfo.${v.id}`;
        v.name = str;
      });
    },
    open() {
      this.rightDrawer = true;
    },
    closeDrawer(e) {
      this.rightDrawer = false;
      if (!e) {
        this.rightDrawer = false;
      }
    },
    onClickItem(e) {
      this.current = e.currentIndex;
      console.log("this.current", this.current);
      this.getProductData();
      this.getOrderListData();
    },
    onClickItem2(e) {
      this.current2 = e.currentIndex;
      this.getProductData();
    },
    onClickItem3(e) {
      this.current2 = e.currentIndex;
      this.getOrderListData();
    },
    menusTap(url) {
      uni.navigateTo({
        url: url,
      });
    },
    navito(e) {
      if (!app.globalData.isIframe) {
        window.location.href = "https://" + e;
      } else {
        return false;
      }
    },
    kefuClick() {
      chatConfig();
    },
    change(value) {
      this.productCategory = value;
    },
    getOrderData() {
      let that = this;
      orderCenterData().then((res) => {
        that.orderMenu.forEach((item, index) => {
          switch (item.title) {
            case "待付款":
              item.num = res.data.unPaidCount;
              break;
            case "待发货":
              item.num = res.data.unShippedCount;
              break;
            case "待收货":
              item.num = res.data.receivedCount;
              break;
            case "待评价":
              item.num = res.data.commentCount;
              break;
            case "售后/退款":
              item.num = res.data.refundCount;
              break;
          }
        });
        that.$set(that, "orderMenu", that.orderMenu);
      });
    },
    // 打开授权
    openAuto() {
      Cache.set(BACK_URL, "/pages/user/index");
      uni.navigateTo({
        url: "/pages/users/login/index?isToLogin=isToLogin",
      });
    },
    /**
     *
     * 获取个人中心图标
     */
    getMyMenus: function () {
      let that = this;
      getMenuList().then((res) => {
        that.$set(that, "MyMenus", res.data.routine_my_menus);
        that.wechatUrl = res.data.routine_my_menus.filter((item) => {
          return item.url.indexOf("service") !== -1;
        });
        res.data.routine_my_menus.map((item) => {
          if (item.url.indexOf("service") !== -1) that.servicePic = item.pic;
        });
        // that.imgUrls = res.data.routine_my_banner
        if (res.data.routine_my_banner) {
          that.imgUrls = res.data.routine_my_banner;
        }
      });
    },
    // 编辑页面
    goEdit() {
      // if (this.isLogin == false) {
      if (false) {
      } else {
        uni.navigateTo({
          url: "/pages/users/user_info_merchant/index",
        });
      }
    },
    // goMenuPage
    goMenuPage(url) {
      if (this.isLogin) {
        uni.navigateTo({
          url,
        });
      }
    },
    returns() {
      uni.navigateBack();
    },
    /**
     * 退出登录
     *
     */
    handleClick(e) {
      let index = e.index,
        that = this;
      if (index === 1) {
        getLogout()
          .then((res) => {
            that.$Cache.set("login_back_url", "/pages/index/index");
            that.$store.commit("LOGOUT");
            uni.reLaunch({
              url: "/pages/index/index",
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
      this.hide();
    },
    hide() {
      this.modal = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.productSelect {
  margin-bottom: 40rpx;
}

.orderBtn {
  border-radius: 20px !important;
  font-size: 12px;
  padding: 0 1em;
  line-height: 1.8;
  margin: 0 0 8px 59vw;
}

.orderBtn2 {
  margin: 16px 0 -3px 65vw;
}

page,
body {
  height: 100%;
}

.main_bg {
  padding-top: 248rpx;
  // @include main_bg_color(theme);
}

.contenBox {
  padding: 0 30rpx;
  background: #fff;
}

.btns {
  position: fixed;
  bottom: 150rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  .btn {
    padding: 30rpx;
    width: 80%;
    background-color: #000;
    color: #ffffff;
  }
}

.support {
  width: 219rpx;
  height: 74rpx;
  margin: 54rpx auto;
  display: block;
}

.new-users {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background: #ffffff;

  .sys-head {
    position: relative;
    width: 100%;
    background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);

    .sys-title {
      z-index: 10;
      position: relative;
      height: 43px;
      text-align: center;
      line-height: 43px;
      font-size: 36rpx;
      color: #ffffff;
    }
  }

  .head {
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
    padding: 0 50rpx;

    // @include index-gradient(theme);
    .user-card {
      position: relative;
      width: 100%;
      margin: 0 auto;
      padding: 35rpx 0 30rpx 0;

      .user-info {
        z-index: 20;
        position: relative;
        display: flex;

        .avatar {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          overflow: hidden;
          border: 1rpx solid #666666;

          .icon {
            width: 100%;
          }
        }

        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;
          padding: 15rpx 0;
          position: relative;

          .name {
            display: flex;
            align-items: center;
            color: #000;
            font-size: 31rpx;
          }

          .app_set {
            position: absolute;
            font-size: 36rpx;
            color: #000;
            top: 40rpx;
            right: 20rpx;
          }

          .label {
            margin-right: 10rpx;
            color: rgb(102, 102, 102);
          }

          .num {
            display: flex;
            align-items: center;
            padding: 6rpx 20rpx 6rpx 0;
            font-size: 20rpx;
            color: #000;

            .iconfont {
              font-size: 20rpx;
            }

            .icon-youxiang {
              padding-right: 10rpx;
            }
          }
        }
      }

      .num-wrapper {
        z-index: 30;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30rpx;
        height: 138rpx;
        color: #333;
        background-color: #fff;
        border-radius: 14rpx;

        .num-item {
          width: 33.33%;
          text-align: center;

          .num {
            font-size: 42rpx;
            font-weight: bold;
          }

          .txt {
            margin-top: 10rpx;
            font-size: 24rpx;
            color: #333;
          }
        }
      }

      .sign {
        z-index: 200;
        position: absolute;
        right: -12rpx;
        top: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 60rpx;
        background: linear-gradient(
          90deg,
          rgba(255, 225, 87, 1) 0%,
          rgba(238, 193, 15, 1) 100%
        );
        border-radius: 29rpx 4rpx 4rpx 29rpx;
        color: #282828;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .order-wrapper {
      background-color: #fff;
      border-radius: 14rpx;
      padding: 30rpx 16rpx;
      position: relative;
      z-index: 11;

      .order-hd {
        justify-content: space-between;
        font-size: 30rpx;
        color: #282828;
        margin-bottom: 40rpx;
        padding: 0 16rpx;

        .left {
          color: #282828;
          font-size: 30rpx;
          font-weight: 600;
        }

        .right {
          align-items: center;
          color: #666666;
          font-size: 26rpx;

          .icon-xiangyou {
            margin-left: 5rpx;
            font-size: 24rpx;
          }
        }
      }

      .order-bd {
        display: flex;
        justify-content: space-between;
        padding: 0;

        .order-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .pic {
            position: relative;
            text-align: center;

            image {
              width: 48rpx;
              height: 48rpx;
            }
          }

          .txt {
            margin-top: 15rpx;
            font-size: 26rpx;
            color: #454545;
          }
        }
      }
    }
  }

  .tab-box {
    background-color: #ffffff;
    border-bottom: 1px solid #eee;

    .content {
      padding: 30rpx;
    }

    .uni-padding-wrap {
      border-bottom: 1px solid #eee;
    }

    &--card {
      position: relative;
      padding: 30rpx;
      border: 1px solid #eee;

      & + .tab-box--card {
        margin-top: 30rpx;
        overflow-x: auto;
      }

      .title {
        color: #9c9c9c;
      }

      .number {
        color: #000;
        font-weight: bold;
        font-size: 44rpx;
      }

      .sub-title {
        color: #000;
      }

      &_part-top {
        padding-bottom: 30rpx;
        border-bottom: 1px solid #eee;
      }

      &_part {
        padding-bottom: 30rpx;
        display: inline-block;
        width: 50%;
      }

      &_part-bottom {
        padding-top: 30rpx;
      }

      .today {
        position: absolute;
        top: 30rpx;
        right: 30rpx;
        padding: 2rpx 10px;
        border: 1px solid #2c2c2c;
        border-radius: 10px;
        font-size: 14rpx;
      }
    }
  }

  .slider-wrapper {
    margin: 20rpx 0;
    height: 138rpx;

    swiper,
    swiper-item {
      height: 100%;
    }

    image {
      width: 100%;
      height: 100%;
    }
  }

  .user-menus {
    background-color: #fff;
    border-radius: 14rpx;
    padding: 30rpx 30rpx 0;

    .menu-title {
      padding-bottom: 40rpx;
      font-size: 30rpx;
      color: #282828;
      font-weight: 600;
    }

    .menu_item {
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rpx solid #f5f5f5;

      image {
        width: 42rpx;
        height: 42rpx;
      }

      .value {
        color: rgb(185, 185, 185);
      }

      .text-999 {
        color: #999;
        font-size: 28rpx;
      }
    }
  }

  .phone {
    color: #000;
  }

  .pic_status {
    font-size: 43rpx;
    @include main_color(theme);
  }

  .order-status-num {
    min-width: 13rpx;
    background-color: #fff;
    @include main_color(theme);
    border-radius: 15px;
    position: absolute;
    right: -14rpx;
    top: -15rpx;
    font-size: 20rpx;
    padding: 0 8rpx;
    @include coupons_border_color(theme);
  }
}

.sub_btn {
  width: 690rpx;
  height: 86rpx;
  line-height: 86rpx;
  margin-top: 60rpx;
  background: $theme-color;
  border-radius: 43rpx;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}

.text-button {
  background: none;
  color: #007aff;
}
</style>
